<template>
  <!-- 这是积分商品的订单 -->
  <div id="createOrder">
    <div class="transport_title">
        <paymentTitleBar :payTitle="payTitle"></paymentTitleBar>
      </div>
      <div class="transport_form" v-if="orderBool">
        <div :class="['Shipping_address_column', EAbool ? 'SACCalass' : '']">
          <h4>收货地址</h4>
          <!-- <div :class="['Shipping_address', address.choiceClass == '1' ? 'isdefaultCalass' : '']" v-for="(address, index) in receivingInformation" :key="address.id" @click="selectAddress(index)"> -->
          <div :class="['Shipping_address', address.id == ruleForm.addressID ? 'isdefaultCalass' : '']" v-for="(address, index) in receivingInformation" :key="address.id" @click="selectAddress(index)">
            <i class="el-icon-close" @click.stop="del(index)"></i>
            <div><h4>{{address.realname}}</h4></div>
            <div>{{address.mobile | coverUp}}</div>
            <div>{{address.province}} {{address.city}} {{address.area}}</div>
            <div>{{address.address}}</div>
            <p><span class="modifyNone" @click.stop="changeAddress(index)">修改</span></p>
          </div>
          <div class="Shipping_address" @click="AddNewAddress">
            <div class="Add_shipping_address">
              <i class="el-icon-circle-plus"></i>
              <div><span>添加新地址</span></div>
            </div>
          </div>
        </div>
        <div class="extended_Address" v-if="EARendering">
          <p @click="showHide">{{EAtext}}更多收货地址</p>
        </div>  
        <div class="delivery_detail">
          <p>商品</p>
          <ul class="delivery_ul">
            <li>
              <table class="ul_li_table">
                <tr>
                  <td>
                    <div class="detail_Img"><router-link :to="{path:'/goodsDetail', query:{id: IGoodsData.goods_id}}"><img :src="IGoodsData.goods_image" alt=""></router-link></div>
                  </td>
                  <td>
                    <div class="detail_Text"><router-link :to="{path:'/goodsDetail', query:{id: IGoodsData.goods_id}}">{{IGoodsData.title}}</router-link></div>
                  </td>
                  <td>
                    <div class="danjiaNum"><el-input-number type="number" v-model.number="totalNum" :min="1" :max="9999" size="mini" :precision="0"></el-input-number></div>
                  </td>
                  <!-- <td>
                    <div class="danjiaNum">{{IGoodsData.price}}元 × <el-input-number type="number" v-model.number="num" :min="1" :max="10" size="mini" :precision="0"></el-input-number></div>
                  </td> -->
                  
                  <td>
                    <div class="moeni">{{IGoodsData.integral * totalNum || "0"}} 积分 <span v-if="IGoodsData.price > 0">+ {{IGoodsData.price * totalNum | decimal}} 元</span></div>
                  </td>
                </tr>
              </table>
            </li>
            <li><div class="detail_distribution public">配送方式</div><div class="express">包邮</div></li>
          </ul>
          <div class="delivery_bill">
            <div class="bill_right">
              <div class="bill_text">
                <div class="bill_list">
                  <div class="list_left">商品件数 :</div>
                  <div class="list_right"><span>{{totalNum}}</span> 件</div>
                </div>
                <div class="bill_list">
                  <div class="list_left">商品总价 :</div>
                  <div class="list_right"><span>{{IGoodsData.integral * totalNum || "0"}} 积分</span><span v-if="IGoodsData.price > 0"> + {{IGoodsData.price * totalNum | decimal}}  元</span></div>
                </div>
                <div class="bill_list">
                  <div class="list_left">运费 :</div>
                  <div class="list_right"><span>0</span> 元</div>
                </div>
                <div class="bill_list">
                  <div class="list_left">应付总额 :</div>
                  <div class="list_right">
                    <span class="fonsize">{{IGoodsData.integral * totalNum || "0"}}</span>  积分
                    <div class="list_money" v-if="IGoodsData.price > 0"><span class="fonsize">+ {{IGoodsData.price * totalNum | decimal}}</span> 元</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom_right">
            <el-button><router-link to="/pointsExchange">返回</router-link></el-button>
            <el-button type="primary" @click="submitForm">立即支付</el-button>
          </div>
        </div>
        <!-- 修改收货地址弹框 -->
        <el-dialog
          :title="modifySA.modifySA_title"
          @close="SAVCloseCallback"
          :visible.sync="SAVisible"
          width="40%">
          <el-form :model="ruleForm" :rules="rules" label-position="top" ref="ruleForm" label-width="100px">
            <el-form-item prop="name" class="Shipping_address_name">
                <el-input v-model.trim="ruleForm.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item prop="phone" class="Receiving_mobile_number">
                <el-input v-model.trim="ruleForm.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item prop="desc">
              <!-- 地区选择器 -->
              <v-distpicker :province="ruleForm.province" :city="ruleForm.city" :area="ruleForm.area" @selected="selected"></v-distpicker>
              <el-input class="disInput" type="textarea" resize="none" :rows="2" v-model="ruleForm.desc" placeholder="请输入详细地址"></el-input>
              
            </el-form-item>
          </el-form>
          <span>设为默认地址 </span>
          <el-switch v-model="switchValue" :width="35" inactive-color="#ccc"></el-switch>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancelSAVisible">取 消</el-button>
            <el-button type="primary" @click="confirmSAVisible">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="select_products" v-else>
        <img src="../../../public/img/saleoff-mitu.png" alt="">
        <h3>请勾选需要结算的商品</h3>
        <div><router-link to="/">去首页</router-link>|<router-link to="/shopping">返回购物车</router-link></div>
      </div>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
import paymentTitleBar from "@/components/PaymentTitleBar";
export default {
  data () {
    return {
      // num: 1,   // 积分商品数量
      payTitle: {title:"创建订单", id: "createOrder"}, // 标题
      orderBool: true,  // 根据是否有结算商品，来显示订单界面还是没有订单界面
      openid: this.$Cookie.getCookie("userID"),  //微信openid
      receivingInformation: [],       // 收货地址
      // 修改收货地址标题
      modifySA: {
        modifySA_title: "",
      },
      SAVisible: false, // 是否打开收货地址
      
      region: "",   //送货地址
      // province: "",   //省份
      // city: "",   //城市
      // area: "",   //地区
      orderAddress: "",   //地区 + 详情地址
      switchValue: false,  // 是否设为默认地址
      EARendering: false, //是否显示更多收货地址栏
      EAtext: "显示", // 更多收货地址，标题
      EAbool: false,  // 是否显示更多收货地址
      IGoodsData: {},  // 积分商品数据
      // inputBool: true,  //发票抬头输入框切换
      totalNum: 1,  //积分商品数量
      // sum: 0,   //应付总额
      // orderCode: "",  //订单号
      url: "https://mp.uekea.cn/attachment/", //图片拼接
      ruleForm: {
        index: "",
        name: "", 
        phone: "",
        desc: ""  ,//详细地址
        province: "",   //省份
        city: "",   //城市
        area: "",   //地区
        addressID: "",  //选择收货地址的id
        isdefault: "",  //是否设为默认地址
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { pattern: /^[a-zA-Z\u4e00-\u9fa5]{2,15}$/, message: "姓名只能字母或者中文，2-15字符",trigger: "blur"}
        ],
        phone: [
          { required: true, message: "请输入11位手机号码", trigger: "blur" },
          { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: "手机号码不正确！",trigger: "blur"}
        ],
        desc: [
          { required: true, message: "请填写详细地址", trigger: "blur" }
        ]
      },
    }
  },
  components: {
    VDistpicker,
    paymentTitleBar
  },
  methods: {
    // 修改收货地址
    changeAddress(index) {
      var _this = this;
      this.SAVisible = true;
      this.modifySA.modifySA_title = "修改收货地址";
      if(this.receivingInformation[index].isdefault == "1") {
        // for(let i = 0; i < _this.receivingInformation.length; i++) {
        //   _this.receivingInformation[i].isdefault = "0";
        // }
        // _this.receivingInformation[index].isdefault = "1";
        _this.switchValue = true;
        _this.ruleForm.isdefault = "1";
      } else {
        // for(let i = 0; i < _this.receivingInformation.length; i++) {
        //   _this.receivingInformation[i].isdefault = "0";
        // }
        _this.switchValue = false;
        _this.ruleForm.isdefault = "0";
      }
      _this.ruleForm.index = JSON.stringify(index);  // 收货地址数组，下标
      _this.ruleForm.name = _this.receivingInformation[index].realname;  //姓名
      _this.ruleForm.phone = _this.receivingInformation[index].mobile;  // 手机号码
      _this.ruleForm.desc = _this.receivingInformation[index].address;  //详细地址

      _this.ruleForm.province = _this.receivingInformation[index].province; //省
      _this.ruleForm.city = _this.receivingInformation[index].city; //市
      _this.ruleForm.area = _this.receivingInformation[index].area; //区
    },
    // 添加收货地址
    AddNewAddress() {
      this.SAVisible = true;
      this.modifySA.modifySA_title = "添加收货地址";
    },
    // 确定，修改或者添加收货地址
    confirmSAVisible() {
      var _this = this;
      _this.$refs["ruleForm"].validate((valid) => {
        if(valid) {
          let num = Number(_this.ruleForm.index);
          let modifyName = _this.ruleForm.name.replace(/\s*/g,"");
          let modifyPhone = _this.ruleForm.phone.replace(/\s*/g,"");
          let modifyProvince = _this.ruleForm.province.replace(/\s*/g,"");
          let modifyCity = _this.ruleForm.city.replace(/\s*/g,"");
          let modifyArea = _this.ruleForm.area.replace(/\s*/g,"");
          let modifyDesc = _this.ruleForm.desc.replace(/\s*/g,"");
          // let modifyIsdefault = _this.ruleForm.isdefault;
          if(_this.ruleForm.index != "") {
            // 修改
            if(_this.switchValue) {
              for(let i = 0; i < _this.receivingInformation.length; i++) {
                _this.receivingInformation[i].isdefault = "0";
              }
              _this.ruleForm.isdefault = "1";
            } else {
              _this.ruleForm.isdefault = "0";
            }
            if(_this.ruleForm.area.length > 1) {
              // _this.receivingInformation[num].isdefault
              if(_this.receivingInformation[num].realname.replace(/\s*/g,"") != modifyName || _this.receivingInformation[num].mobile.replace(/\s*/g,"") != modifyPhone || _this.receivingInformation[num].province.replace(/\s*/g,"") != modifyProvince || _this.receivingInformation[num].city.replace(/\s*/g,"") != modifyCity || _this.receivingInformation[num].area.replace(/\s*/g,"") != modifyArea || _this.receivingInformation[num].address.replace(/\s*/g,"") != modifyDesc || _this.receivingInformation[num].isdefault != _this.ruleForm.isdefault) {
                // 修改收货地址，接口
                _this.$put(`user/address/${_this.openid}/${_this.receivingInformation[num].id}`,{
                  realname: _this.ruleForm.name,
                  mobile: _this.ruleForm.phone,
                  province: _this.ruleForm.province,
                  city: _this.ruleForm.city,
                  area: _this.ruleForm.area,
                  address: _this.ruleForm.desc,
                  isdefault: _this.ruleForm.isdefault,
                  zipcode: "",
                }).then(res=>{
                  if(res.code == 201) {
                    _this.ruleForm.index = "";
                    _this.receivingInformation[num].realname = _this.ruleForm.name;
                    _this.receivingInformation[num].mobile = _this.ruleForm.phone;
                    _this.receivingInformation[num].province = _this.ruleForm.province;
                    _this.receivingInformation[num].city = _this.ruleForm.city;
                    _this.receivingInformation[num].area = _this.ruleForm.area;
                    _this.receivingInformation[num].address = _this.ruleForm.desc;
                    _this.receivingInformation[num].isdefault = _this.ruleForm.isdefault;

                    _this.SAVisible = false;
                  } else {
                    _this.$MessageAlert(true, res.data, "error")
                    _this.SAVisible = false;
                  }
                }).catch(()=>{
                  _this.SAVisible = false;
                })
              } else {
                _this.SAVisible = false;
                _this.$MessageAlert(true, "地址相同，不进行修改", "success")
              }
            } else {
              _this.$MessageAlert(true, "请选择地区", "error")
            }
            
            
            // if(_this.switchValue) {
            //   _this.receivingInformation[num].isdefault = "1";
            // } else {
            //   _this.receivingInformation[num].isdefault = "0";
            // }
          } else {
            // 添加
            let obj = {};
            if(_this.switchValue) {
              obj.isdefault = "1";
            } else {
              obj.isdefault = "0";
            }
          
            // 添加收货地址，接口
            _this.$post("user/address", {
              openid: _this.openid,
              realname: _this.ruleForm.name,
              mobile: _this.ruleForm.phone,
              province: _this.ruleForm.province,
              city: _this.ruleForm.city,
              area: _this.ruleForm.area,
              address: _this.ruleForm.desc,
              isdefault: obj.isdefault,
              zipcode: ""
            }).then(res=>{
              if(res.code == 201) {
                // 获取收货地址
                _this.getAddress();
                // _this.receivingInformation.unshift(obj);
              } 
              _this.SAVisible = false;
            }).catch(()=>{
              _this.SAVisible = false;
            })
          }
        }
      })
      
    },
    // 取消，修改或者添加收货地址
    cancelSAVisible() {
      this.SAVisible = false;
    },
    // 选择收货地址
    selectAddress(index) {
      // var _this = this;
      this.ruleForm.addressID = this.receivingInformation[index].id;
      this.ruleForm.index = index;
    },
    // 付款，结算
    submitForm() {
      var _this = this;
      let orderObj = {};   // 订单
      // let listarr = [];   // 商品列表数据
      // 判断商品id，是否为空
      if(_this.IGoodsData.id != undefined) {
        // 判断是否有选择收货地址，收货地址id不为空
        if(_this.ruleForm.addressID != ""){
          for (const x of _this.receivingInformation) {
            // 判断收货地址数组和选择的收货地址id，相同，提前数组里面的收货地址信息，存储
            if(x.id == _this.ruleForm.addressID) {
              orderObj.ShippingAddress = x;   // 收货地址的全部信息
              // x.realname = "**" + x.realname.substr(-1, 1);    // 姓名
              // x.mobile = x.mobile.substring(0, 3) + "****" + x.mobile.substr(-4, 4);  // 手机号码，进行遮掩变成*
              break;
            }
          }
          // _this.funCode();  //生成订单号
          let obj = JSON.parse(JSON.stringify(_this.IGoodsData));
          obj.number = _this.totalNum;      // 购买的商品数量
          orderObj.IGoodsData = obj;   // 积分商品数据
          _this.$store.commit("createOrder", orderObj);   // 存储积分商品订单信息到vuex
          // _this.$router.push({"path": "./pointsPayment"});    // 跳转到积分支付页面
          console.log(orderObj.IGoodsData)
          
        } else {
          _this.$MessageAlert(true, "请选择收货地址", "error");
        }
      } else {
        _this.$MessageAlert(true, "没有商品，请去选择商品后再来", "error");
      }
      
    },
    // 地区选择器
    selected(data) {
          var _this = this;
          _this.ruleForm.province = data.province.value;
          _this.ruleForm.city = data.city.value;
          _this.ruleForm.area = data.area.value;
    },
    
    // 给小于10的时间，前面添加0
    timeFormat(param) {
      // 小于10，数值前面加0，大于10，值就不改变
      return param < 10 ? "0" + param : param;
    },
    // 生成订单号
    funCode() {
      var _this = this;
      // 生成订单号前，要看一下，之前是否有订单号存在。
      // this.$store.commit("order", {});   // 存储空的对象，清除订单数据 vuex
      
      let time = new Date();
      let orderTime = time.getFullYear() + "" + this.timeFormat(time.getMonth()+1) + this.timeFormat(time.getDate()) + this.timeFormat(time.getHours()) + this.timeFormat(time.getMinutes()) + this.timeFormat(time.getSeconds());

      // let arr = JSON.parse(JSON.stringify(_this.IGoodsData));
      let arr = _this.IGoodsData;
      let newArr = [];  // 处理后的订单数据
      // 循环arr数据，判断订单号相同的就放一起
      // (注：返回的数据是一个商品一条数据，如果一个订单多个商品，就要进行处理，把相同订单商品放在同一个订单上。)
      for (let i = 0; i < arr.length; i++) {
        let dataArr = [];
        let ran = "";   // 随机数
        // 循环一次，dataArr就是空数组，添加到数组里面，下面进行判断
        dataArr.push(arr[i]);
        // 循环，i+1,如i=0,那么下面j=0，相当与和自身比较，所以j=i+1,直接进行下一位比较。
        for (let j = i+1; j < arr.length; j++) {
          // 判断dataArr数组第一个id是否和arr里面的id相同，因为dataArr数组在第一层循环只添加了一个，所以dataArr[0]
          if(dataArr[0].merch_id == arr[j].merch_id) {
            // 第一层循环就添加了一个到数组，所以后面有相同的直接添加到数组.
            dataArr.push(arr[j]);
            arr.splice(j, 1);
            // 数组删除后，里面的会往前进一位(例:如果删除了2下标的，下标3的前进一位会变成2，不减1，那么下标2就会跳过检测)
            j--;
          }
        };
        
        // 6位随机数
        for (let j = 0; j < 6; j++) {
          ran += Math.floor(Math.random() * 10);
        }
        dataArr.unshift("ME" + orderTime + (ran));
        newArr.push(dataArr);
      }
      let Mran = "";
      // 6位随机数
      for (let j = 0; j < 6; j++) {
        Mran += Math.floor(Math.random() * 10);
      }
      _this.orderCode = "ME" + orderTime + (Mran); // 虚假订单号，不显示，只请求数据使用
      _this.IGoodsData = newArr;

      // this.orderCode = "ME" + orderTime + (Math.floor(Math.random()*1000000));  //日期时间戳+随机数，用来生成订单号。
    },
    // 收货地址框的关闭回调
    SAVCloseCallback() {
      this.$refs["ruleForm"].resetFields();
      this.ruleForm.index = "";  //index，下标
      this.ruleForm.name = "";   //姓名
      this.ruleForm.phone = "";  // 手机号码
      this.ruleForm.desc = "";   //详细地址
      this.ruleForm.province = "";  //省
      this.ruleForm.city = "";  //市
      this.ruleForm.area = "";  //区
      this.switchValue = false;   // 收货地址弹框的默认地址，改为否
    },
    // 刷新
    // storageInvoice() {
    //   console.log("刷新")
    //   // alert("监听页面刷新，前进和后退")
    //   // this.$store.commit("checkS", []);  // 给空数组，清空 确认订单里面的商品数据
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 删除收货地址
    del(index) {
      var _this = this;
      _this.$confirm("此操作将删除该数据, 是否继续?"
      ).then(() => {
          _this.$dele(`user/address/${_this.openid}/${_this.receivingInformation[index].id}`
          ).then(res =>{
            if(res.code == 204) {
              _this.$MessageAlert(true, "删除成功", "success");
              _this.receivingInformation.splice(index, 1);
            }
          })
          
          // _this.$MessageAlert(true, "删除成功", "success");
          if(_this.receivingInformation.length > 2) {
            _this.EARendering = true;
          } else {
            _this.EARendering = false;
          }
      }).catch(() => {
        _this.$MessageAlert(true, "已经取消删除", "success");
      });
    },
    // 显示隐藏，更多收货地址
    showHide() {
      if(this.receivingInformation.length > 2) {
        this.EAbool = this.EAbool ? false : true;
      }
      
      if(this.EAbool) {
        this.EAtext = "收起";
      } else {
        this.EAtext = "显示";
      }
    },
    // 获取收货地址
    getAddress() {
      var _this = this;
      _this.$get(`user/address/${_this.openid}`).then(res=>{
        if(res.code == 200) {
          _this.receivingInformation = res.data;
          for(let i = 0; i < _this.receivingInformation.length; i++) {
            if(_this.receivingInformation[i].isdefault == "1") {
              _this.ruleForm.addressID = _this.receivingInformation[i].id;
              if(i > 2) {
                _this.EAbool = true;
                _this.EAtext = "收起";
              }
            }
          }
          // 判断收货地址是否大于2，决定是否显示，更多收货地址栏
          if(_this.receivingInformation.length > 2) {
            _this.EARendering = true;
          } else {
            _this.EARendering = false;
          }
        }
      })
    },
    // 头部组件标题，传过来的值
    // childValue(index) {
    //   console.log(index);
    // }
  },
  filters: {
    // 价格，保留两位小数
    decimal(n) {
      return n.toFixed(2);
    },
    // 遮掩手机号码
    coverUp(n) {
      return (n.substring(0, 3) + "****" + n.substr(-4, 4));  // 手机号码，进行遮掩变成*
    },
  },
  created(){
    var _this = this;
    // window.addEventListener("beforeunload", _this.storageInvoice());
    let checkS = _this.$store.state.OrderData;     // 拿vuex的积分商品数据
    if(checkS.id != undefined) {
      _this.orderBool = true;
      // 获取收货地址
      _this.getAddress();
      _this.IGoodsData = checkS;
    } else {
      _this.orderBool = false;
      // _this.orderBool = true;
    }
    if(_this.receivingInformation.length > 2) {
      _this.EARendering = true;
    } else {
      _this.EARendering = false;
    }
  },
  watch: {

  },
  // 离开当前页面时调用
  // beforeDestroy() {
  //   this.storageInvoice();
  // },
  // destroyed() {
  //   window.removeEventListener("beforeunload", this.storageInvoice())
  // }
}
</script>

<style lang="less" scoped>
#createOrder {
  min-width: 1000px;
}
.transport_form {
  width: 950px;
  margin: auto;
  // text-transform:none;
}
.select_products {
  width: 950px;
  margin: auto;
  padding: 0px 60px;
  text-align: center;
  padding-bottom: 100px;
  h3 {
    margin-top: 30px;
    margin-bottom: 25px;
  }
  a {
    margin: 0px 15px;
  }
}
// 
.Shipping_address_column {
  width: 950px;
  margin: auto;
  padding: 0px 60px;
  // margin-bottom: 20px;
  height: 215px;
  overflow: hidden;
  // font-size: 0px;
  
  h4 {
    font-size: 17px;
    font-weight: 100;
    color: #333;
    text-transform:none;
  }
  .Shipping_address {
    color: #646262;
    margin: 10px 0px;
    padding: 15px 25px 0px;
    display: inline-block;
    border: 1px solid #ccc;
    width: 240px;
    margin-right: 20px;
    height: 155px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    div {
      font-size: 13px;
      font-weight: 100;
    }
    p {
      margin-top: 15px;
      font-size: 14px;
      color: #ff6700;
      position: absolute;
      bottom: 3px;
      right: 25px;
    }
    .modifyNone {
      display: none;
    }
    .el-icon-close {
      position: absolute;
      top: 8px;
      right: 10px;
      font-size: 16px;
      display: none;
    }
  }
  .Shipping_address:hover {
    border-color: #ff6700;
    .el-icon-circle-plus {
      color: #b0b0b0;
      transition-duration: 0.3s;
    }
    .modifyNone {
      display: inline;
    }
    .el-icon-close {
      display: inline;
    }
  }
  .Add_shipping_address {
    margin-top: 39px;
    text-align: center;
    .el-icon-circle-plus {
      color: #e0e0e0;
      font-size: 32px;
      margin-bottom: 7px;
      transition-duration: 0.3s;
    }
    div {
      color: #b0b0b0;
    }
  }
  .isdefaultCalass {
    border: 1px solid #ff6700;
  }
}
.SACCalass {
  height: auto !important;
}
.Shipping_address_name {
  width: 47%;
  display: inline-block;
  vertical-align: middle;
}
.Receiving_mobile_number {
  width: 47%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6%;
}
// // 
// /deep/ .el-form-item__label {
//   text-align: left;
//   padding-left: 10px;
// }
.transport_title {
  margin-bottom: 70px;
}

.extended_Address {
  margin-top: 10px;
  padding: 0px 60px;
  p {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: RGB(236,236,236);
    color: #333;
    font-size: 13px;
    cursor: pointer;
  }
}
.delivery_detail {
  margin-top: 20px;
  padding: 0px 60px;
  p {
    font-size: 20px;
    font-weight: 200;
  }
}
.delivery_ul {
  li {
    line-height: 100px;
    border-bottom: 1px solid #ccc;
    div {
      display: inline-block;
    }
  }
  li:nth-child(1){
    display: flex;
    justify-content: space-around;
  }
  // li:last-child {
  //   line-height: 0px;
  // }
  .ul_li_table {
    width: 100%;
    text-align: center;
    tr {
      line-height: 70px;
      .detail_Text {
          margin-left: 20px;
          max-width: 320px;
          display: inline-block;
          vertical-align: middle;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          a {
            color: black;
            text-decoration: none;
          }
      }
      td:nth-child(2) {
        text-align: left;
        width: 400px;
      }
      .moeni {
        color: #f25807;
      }
    }
  }
}
.detail_Img {
  height: 50px;
  width: 50px;
  display: inline-block;
  img {
      height: auto;
      width: auto;
  }
}

// // 地区选择器
/deep/ .distpicker-address-wrapper select {
  font-size: 1.3rem;
}
.disInput {
  margin-top: 25px;
  margin-left: 0px !important;
  // border: 1px !important;
}
.express {
  text-indent: 30px;
  color: #f25807;
}
// /deep/ .el-textarea {
//   width: 100%;
//   margin-left: 15px;
// }
// /deep/ .el-textarea__inner {
//   height: 100px;
//   border: 0px;
// }
.bottom {
  width: 950px;
  padding: 0px 60px;
}
.bottom_right {
  text-align: right;
  margin-bottom: 80px;
  margin-top: 30px;
  .el-button {
    border-radius: 0px;
    width: 120px;
    height: 42px;
  }
  .el-button+.el-button {
    margin-left: 40px;
    width: 150px;
    background-color: #ff6700;
    border: #ff6700;
    font-size: 18px;
  }
  a {
    text-decoration: none;
    color: black;
  }
}
// .wares_border {
//   padding-bottom: 15px;
//   border-bottom: 1px solid #ccc;
// }
/deep/ .el-dialog {
  max-width: 600px;
  min-width: 500px;
}

/deep/ .el-input-number {
  width: 100px;
  font-size: 15px;
}
/deep/ .el-input--mini .el-input__inner {
  font-size: 14px;
  padding: 0px 28px !important;
}
.delivery_bill {
  height: 160px;
  border-bottom: 1px solid #ccc;
}
.bill_right {
  float: right;
  .bill_list {
    height: 29px;
    line-height: 29px;
    .list_left {
      width: 100px;
      text-align: right;
      float: left;
      clear: both;
    }
    .list_right {
      color: #f25807;
      min-width: 100px;
      text-align: right;
      float: right;
      padding-left: 10px;
      .fonsize {
        font-size: 28px;
      }
      .list_money {
        display: inline-block;
      }
    }
  }
  .bill_list:last-child {
    height: 33px;
    margin-top: 20px;
    .list_left {
      margin-top: 3px;
    }
  }
  
}
</style>